<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="app" >
        <template>
            <div class="block">

                <span class="demonstration">默认 Hover 指示器触发</span>
                <el-carousel height="450px">
                    <el-carousel-item v-for="img in imgList" >
                        <!--<h3 class="small">{{ img.id}}</h3>-->
                        <img :src="img.src"/>
                    </el-carousel-item>

                </el-carousel>
            </div>

        </template>
        <!--<img :src="url">-->
        <!--<img src="../images/2.JPG">-->
        <!--<li v-for="img in imgList" >-->

            <!--{{img.src}}-->
        <!--</li>-->
        <!--<img v-for="img in imgList" :src=""-->
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                url:"../images/4.JPG",
                imgList: [
                    {src:"../images/1.JPG"},
                    {src:"../images/2.JPG"},
                    {src:"../images/3.PNG"},
                    {src:"../images/4.JPG"}
                ],
            },
        });
    </script>
</body>
</html>